<template>
    <div>
        <chartComponent :style="{height:props.height,width:props.width}" ref="lineChartDataRef" />
    </div>
</template>

<script setup>
import {ref, watch} from 'vue'
import ChartComponent from "@/views/dashboard/zhb/components/chartComponent.vue";
import {queryCalcServerInfoByPage} from "@/api/system/monitor";
import _ from "lodash";
import { isNotVoid } from '@/utils/util';

const {proxy} = getCurrentInstance()
const props = defineProps({
    rowData:{
        type:Object,
        default: null
    },
    width: {
        type: String,
        default: '100%'
    },
    height: {
        type: String,
        default: '100%'
    },
})
const timer = ref(null)
const optionData = reactive({
    data:{
        title: {
            text: '负载时序图'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                animation: false
            }
        },
        legend: {
            data: [ 'CPU使用率','内存使用率','线程数'],
            textStyle: { //图例文字的样式
                fontSize: 20,
            },
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                // saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: [0, '100%'],
            data: []
        },
        yAxis: {
            type: 'value'
        },
        series: []
    }
})

const loadDataList = () => {
    let rData = props.rowData
    if (!isNotVoid(rData)) {
      return
    }
    let address = rData.serverIp+':'+rData.serverPort
    queryCalcServerInfoByPage({
        begTime: new Date().toISOString().slice(0, 10),
        ipPort: address,
    }).then(res=>{
        let systemCpuUsedArr = res.list.map(item=> _.toNumber(item.systemCpuUsed).toPrecision(2))
        let systemProcessArr = res.list.map(item=> item.systemProcess)
        let memUsedArr = res.list.map(item=> _.multiply(_.divide(item.usedMemory,item.systemMemory),100).toPrecision(2) )
        const xArr = res.list.map(item=>item.createTime)
        let yArr = [
            {
                name: 'CPU使用率',
                type: 'line',
                stack:'Total',
                data:  systemCpuUsedArr
            },
            {
                name: '内存使用率',
                type: 'line',
                data: memUsedArr
            },
            {
                name: '线程数',
                type: 'line',
                data:  systemProcessArr
            }

        ]
        optionData.data.xAxis.data = xArr
        optionData.data.series = yArr
        optionData.data.title.text = address
        proxy.$refs.lineChartDataRef.initChart(optionData.data);
    })
}

watch(() => props.rowData, (nv, ov) => {
  if(nv != ov) {
    loadDataList()
  }
})

// 开启定时器
const startTimer = () => {
    if(timer.value){
        clearTimer();
    }
    timer.value = setInterval(() => {
        loadDataList()
    }, 20000)
}
const closeTimer = () => {
    clearInterval(timer.value)
    timer.value = ""
}

onMounted(() => {
    startTimer()
})
// 激活时
onActivated(() => {
    startTimer()
})
// 隐藏时
onDeactivated(() => {
    closeTimer()
})

onUnmounted(() => {
    closeTimer()
})

</script>

